<template>
  <div class="helpInstructionsBox">
    <div class="top">
      <template v-if="title">
        <p></p>
        <div>{{title}}</div>
        <p></p>
      </template>
      <slot name="top" v-else/>
    </div>
    <div class="middle">
      <slot name="middle"/>
    </div>
    <div class="bottom">
      <div class="btn">
        <slot name="bottomBtns"/>
      </div>
    </div>
  </div>
</template>

<script>

  export default {

    props:{
      title: ''
    }
  }
</script>

<style lang="less" scoped>
  .container {
    .helpInstructionsBox {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      border-radius: 20px;
      backdrop-filter: blur(5px);
      background-color: rgba(229, 229, 229, 0.4);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.4);

      .top {
        padding: 5px 0;
        width: 100%;
        min-height: 20%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 24px;

        p {
          width: 300px;
          height: 5px;
          background-color: rgba(229, 229, 229, 0.4);
          backdrop-filter: blur(5px);
        }
      }

      .bottom {
        margin: 0 auto;
        width: 80%;
        left: 446px;

        .btn {
          padding: 15px 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          .ant-btn{
            width: 150px;
            &:first-child:not(:last-child){
              margin-right: 100px;
            }
          }
        }
      }

      .middle {
        flex: 1;
        margin: 0 auto;
        padding: 0 10%;
        // height: calc(80% - 150px);
        overflow-y: auto;
        overflow-x: hidden;
        /*left: 446px;*/
        color: #fff;
        font-size: 10px;
        width: 100%;

        /deep/ .ant-form-item {
          margin-bottom: 10px;
        }

        ::v-deep.helpContent {
          div {
            table {
              border-color: #ccc;
              color: #000;
              font-size: 10px;

              tbody {
                tr {
                  background: #fff;
                  height: 40px;
                }

                tr:first-child {
                  background: rgb(212, 211, 211);
                }
              }
            }
          }
        }

        /deep/.customTextAreaWrap .tip{
          bottom: -15px;
        }
        .btn {
          width: 50%;
          margin: 20px auto 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        ::v-deep.ant-table-thead {
          tr {
            th {
              background: rgb(224, 224, 224) !important;
            }
          }
        }

        ::v-deep.ant-table-row {
          background: #fff;
        }

        ::v-deep.ant-table-tbody > tr > td {
          padding: 10px;
        }

        ::v-deep.ant-table-thead > tr > th {
          padding: 10px;
        }
      }
    }
  }
</style>
